<template>
  <div class="publish">
    <div class="noactivate" v-if="disputability">
      <input type="text" :placeholder="defaults" @focus="isactivate" :value="contentText" />

      <div class="message">
        <span class="iconfont iconpinglun-"></span>
        <div class="redmessage">1020</div>
      </div>
      <span class="iconfont iconshoucang"></span>
      <span class="iconfont iconfenxiang"></span>
    </div>
    <div class="activate" v-if="!disputability">
      <textarea
        rows="2"
        @blur="isnoactivate"
        ref="lockfocus"
        v-model="contentText"
        :placeholder="defaults"
      ></textarea>
      <span class="send" @click="send">发送</span>
    </div>
  </div>
</template>

<script>
export default {
  props: ["publishdata"],
  data() {
    return {
      disputability: true,
      contentText: ""
    };
  },
  computed: {
    defaults() {
      if (this.publishdata.name) {
        //   有this.publishdata.name就传,没有就默认"写跟帖",;因为判断是点击主评论的回复还是回复本页面文章
        return "@" + this.publishdata.name + ":";
      } else {
        return "写跟帖";
      }
    }
  },
  methods: {
    isactivate() {
      this.disputability = false;
      //this.$nextTick(回调函数), vue里面的一个用法,改变数据的时候, textarea 其实是被 v-if 删除了的, 所以没法立刻获得 $refs

      this.$nextTick(() => {
        //    this.place = "@" + this.publishdata.name + ":";
        this.$refs.lockfocus.focus();
      });
    },
    isnoactivate() {
      // this.publishdata = {};
      setTimeout(() => {
        this.disputability = true;
      }, 50);
    },
    send() {
      console.log(this.$route.params.id);
      console.log(this.contentText);
      //   参数
      //   :id       文章id
      //   content   评论内容
      //   parent_id 回复id
      //   判断是点击主评论的回复还是回复本页面文章,是就传从主评论获得回来publishdata.id赋值parent_id进去,不是参数就传:id和content
      var data = {
        content: this.contentText
      };
      if (this.publishdata.id) {
        data.parent_id = this.publishdata.id;
      }

      this.$axios({
        url: "/post_comment/" + this.$route.params.id,
        method: "post",
        data
      }).then(res => {
        console.log(res);
        if (res.data.message == "评论发布成功") {
          //评论发布成功清空内容
          this.contentText = "";
          //   this.disputability = true;
          //评论发布成功提醒页面重新加载,这样就不用手动刷新了
          this.$emit("loadcomment");
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
* {
  box-sizing: border-box;
}
.publish {
  position: fixed;
  padding: 10px 14px;
  bottom: 0;
  left: 0;
  width: 100%;

  background: #f2f2f2;
  .noactivate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    input {
      width: 180px;
      height: 30px;
      background-color: #d7d7d7;
      padding: 12px;
      line-height: 30px;
      outline: none;
      border: none;
      border-radius: 15px;
      font-size: 12px;
    }
    .iconfont {
      //   margin-left: 20px;
      font-size: 24px;
    }
    .message {
      position: relative;
      .redmessage {
        position: absolute;
        background-color: red;
        padding: 2px 6px;
        top: -8px;
        right: -15px;
        border-radius: 12px;
        font-size: 10px;
        color: white;
      }
    }
  }
  .activate {
    display: flex;
    align-items: flex-end;
    textarea {
      flex: 1;
      background-color: #d7d7d7;
      border-radius: 12px;
      border: none;
      outline: none;
      padding: 12px;
      resize: none;
    }
    .send {
      margin: 0 10px;
      width: 60px;
      height: 26px;
      text-align: center;
      line-height: 26px;
      border-radius: 15px;
      font-size: 12px;
      background-color: red;
      color: white;
    }
  }
}
</style>